<template>
	<view class="u-page fullpage">
		<zx-nav title="分享赚钱" color="#fff"></zx-nav>
		<image class="bg1" :src="`${assetsPath}/invite/bg1.png`" mode="widthFix"></image>
		<image class="bg3" :src="`${assetsPath}/invite/bg4.png`" mode="widthFix"></image>
		<image class="bg2" :src="`${assetsPath}/invite/bg2.png`" mode="widthFix"></image>
		<view class="info">
			<view class="flex align-center justify-between">
				<view class="money">
					<text>我的推广金：</text>
					<text class="u-primary">{{ freshbean || 0 }}</text>
				</view>
				<view class="tx-button" @tap="navTo('/pages/freshBean/freshBean')">查看</view>
			</view>
			<image class="bg" :src="`${assetsPath}/invite/bg3.png`" mode="widthFix"></image>
			<view class="flex justify-between mt30 ml20 mr20">
				<view>邀请好友</view>
				<view class="text-center">
					<view>好友下单</view>
					<view>获取推广金</view>
				</view>
				<view class="text-center">
					<view>转余额</view>
					<view>提现</view>
				</view>
			</view>
			<view class="animation-shake mt30 flex">
				<u-button shape="circle" open-type="share" type="success" text="立即邀请"></u-button>
				<u-button
					shape="circle"
					type="success"
					text="生成海报"
					@tap="createPoster"
					:customStyle="{
						marginLeft: '20rpx'
					}"
				></u-button>
			</view>
		</view>
		<view class="rule">
			<view class="title">规则说明</view>
			<view>1、先登录平台，然后转发给好友，好友下单后您会获得好友下单金额等额的推广金奖励；</view>
			<view>2、推广金点击此页面右上角“查看”按钮，先转换为金额，方可提现；</view>
			<view>3、推广金到账时间为订单完成后，若好友取消订单，则不会获得推广金；</view>
			<view>4、一次邀请，永久绑定，即：好友多次下单，您都会有收益哦～</view>
		</view>
		<poster ref="poster" :memberId="memberId"></poster>
	</view>
</template>

<script>
import sharemixin from '@/common/sharemixin.js';
import poster from '@/components/poster.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState(['memberId', 'userInfo']),
		freshbean() {
			return this.userInfo.fresh_bean || 0;
		}
	},
	mixins: [sharemixin],
	components: { poster },
	methods: {
		navTo(path, type) {
			if (!type) {
				type = 'navigateTo';
			}
			uni[type]({
				url: path
			});
		},
		createPoster() {
			this.$refs.poster.openPoster();
		}
	}
};
</script>
<style>
page {
	background: #ff3543;
}
</style>
<style lang="less">
.u-page {
	background: linear-gradient(180deg, #ff8173 0%, #ff3543 100%);
	position: relative;
}

.bg1 {
	width: 100%;
	height: 520upx;
	display: block;
	position: absolute;
	top: 55upx;
}
.bg2 {
	width: 466upx;
	display: block;
	margin: 0 auto;
	height: 207upx;
	position: relative;
	top: 17upx;
}
.bg3 {
	width: 547upx;
	display: block;
	height: 249upx;
	margin: 30upx auto 0;
}
.info {
	width: 694upx;
	height: 476upx;
	background: #ffffff;
	border-radius: 12upx;
	margin: 0 auto;
	padding: 47upx 32upx 40upx;
	color: #000;
	font-weight: 500;
	font-size: 28upx;
	.bg {
		display: block;
		margin: 40upx auto 24upx;
		width: 579upx;
		height: 80upx;
	}
	.tx-button {
		width: 136upx;
		height: 54upx;
		background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		border-radius: 33upx;
		text-align: center;
		line-height: 54upx;
		font-weight: 500;
		color: #ffffff;
		font-size: 26upx;
	}
}
.rule {
	font-size: 26upx;
	color: #fff;
	margin: 29upx 28upx 0;
	line-height: 37upx;
	.title {
		font-size: 32upx;
		font-weight: 500;
	}
	& > view {
		margin-bottom: 20upx;
	}
}
</style>
